<template>
    <div style="margin-bottom:48px">
        <v-toolbar dark color="primary" style="box-shadow:none">
            <v-icon>keyboard_arrow_left</v-icon>
            <v-toolbar-title style="margin:0" @click="$router.back(-1)">菜品详情</v-toolbar-title>
            <v-icon style="position:absolute;right:0;margin-right:16px" @click="$router.push('/message')">mail_outline</v-icon>
        </v-toolbar>

        <v-layout row wrap justify-center align-center style="margin-top: 10px">
            <v-flex xs4 text-xs-center>
                <img style="border-radius:50%;height:90px;width:90px;" :src="dish.avatar">
            </v-flex>
            <v-flex xs5>
                <span style="font-size:20px"><b>{{dish.createdBy}}</b></span><br>
                <span>电话：{{dish.contact}}</span>
            </v-flex>
            <v-flex><span style="float:right;padding-right:16px;font-size:20px"><b>￥{{dish.dishesPrice}}</b></span></v-flex>
        </v-layout>
        
        <v-container>
            <v-divider></v-divider>
            <v-layout row wrap="">
                <v-flex><h2 style="margin:10px 0 10px 0">{{dish.dishesName}}</h2></v-flex>
                <v-flex style="margin:10px 0 10px 0">
                    <div style="float:right">
                    <v-chip small>{{dish.dishesType}}</v-chip>
                    <v-chip small>{{dish.dishesTaste}}</v-chip>
                    <v-chip small>{{dish.dishesFor}}</v-chip>
                    </div>
                </v-flex>
                
                <p style="font-size: 15px;">{{dish.dishesMake}}</p>
                <v-flex xs12 v-for="(value,index) in dish.dishPics" v-bind:key=index>
                    <img :src="value.src" style="width:100%">
                </v-flex>
                <v-flex>
                    <v-icon>place</v-icon>
                    <span>{{dish.communityName}}</span>
                </v-flex>
                <v-flex>
                    <span style="float:right;line-height:26px">发布于{{dish.createdOn}}</span>
                </v-flex>
            </v-layout>
        </v-container>
        <div flat style="z-index:1;position:fixed;bottom:0;width:100%">
            <v-layout justify-center align-center style="background:#eeeeee">
            <v-flex text-xs-center style="">
                <v-btn :color="collectColor" flat value="home" @click="collectControl" style="width:100%">
                    <span v-show="collectColor=='green'">已</span><span>收藏</span>
                    <v-icon>{{collectIcon}}</v-icon>
                </v-btn>
            </v-flex>

            <v-flex text-xs-center style="background:#4caf50">
                <v-btn color="white" flat @click="$router.push('/'+dish.createdBy+'/chat')" style="width:100%">
                    <span>聊天</span>
                    <v-icon>insert_comment</v-icon>
                </v-btn>
            </v-flex>
            </v-layout>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            dish:{
                createdBy:'张三',
                avatar:require('../../assets/avatar.jpg'),
                contact:'11111111111',
                communityName:'国际软件学院',
                dishesName:'番茄蛋汤',
                dishesTaste:'咸',
                dishesType:'家常菜',
                dishesFor:'所有人',
                dishesPrice:'200',
                dishesMake:'番茄炒蛋，咸了加水，淡了加盐，就可以变成番茄蛋汤撒覅红红火火恍恍惚惚啊啊啊啊啊是范德萨范德萨分萨芬厚爱是否按时的佛撒范德萨安抚好好读书覅',
                createdBy:'两天前',
                dishPics: [
                    {src:'http://img06.tooopen.com/images/20161227/tooopen_sy_193231816562.jpg'},
                    {src:'http://img06.tooopen.com/images/20161227/tooopen_sy_193231816562.jpg'},
                    {src:'http://img06.tooopen.com/images/20161227/tooopen_sy_193231816562.jpg'}
                ],
            },
            dishContent:['createdBy','contact','communityName','dishesName','dishesTaste','dishesType','dishesFor','dishesPrice','dishesMake','createdOn'],
            collectColor:'',
            collectIcon:'star_border',
            collect:false,
        }
    },
    methods:{
        collectControl(){
            if(this.collect){
                this.collectColor=''
                this.collectIcon='star_border'
            }else{
                this.collectColor='green'
                this.collectIcon='star'
            }
            this.collect=!this.collect
            
        },
        getDetail(){
            this.$axios({
                method:'get',
                url:'/api/dishes/details/'+this.$route.params.dishID,
            }).then(
                function(response){
                    var res=response.parseJSON()
                    setContent(res)
                }
            ).catch({
                function(response){
                    console.log(response)
                }
            })
        },
        setContent(res){
            for(var i in this.dishContent){
                this.dish[this.dishContent[i]]=row[this.dishContent[i]]
            }
            //this.dish['avatar']
            var attachments=res['attachments']
            for(var i in attachments){
                this.dish['dishPics'].push(attachments[i]['attachmentUrl'])
            }
        }
    },
    mounted(){
        // this.getDetail
    }
}
</script>



